TypeScriptの高度な型：テンプレートリテラル型と条件型をマスターする

国際的な例：異なる日付形式の処理

世界の異なる地域では、異なる日付形式が使用されます。これらのバリエーションを処理するために条件型を使用できます。

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementation would handle different date formats)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Access the year knowing it will be there

この例では、指定された日付形式に基づいて異なる日付解析関数を定義するために条件型を使用しています。ParseDate型は、返されるオブジェクトが形式に基づいて正しいプロパティを持つことを保証します。

テンプレートリテラル型と条件型の組み合わせ

テンプレートリテラル型と条件型を組み合わせることで、真の力が発揮されます。これにより、信じられないほど強力な型操作が可能になります。

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Simplified for demonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Example function that takes a type
function processEvent(event: T): ExtractEventPayload {
    //In a real implementation, we would actually dispatch the event.
    console.log(`Processing event ${event}`);

    //In a real implementation, the payload would be based on event type.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Note that the return types are very specific:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

ベストプラクティスと考慮事項

• シンプルに保つ: 強力である一方で、これらの高度な型はすぐに複雑になる可能性があります。明瞭さと保守性を追求しましょう。
• 徹底的なテスト: 包括的なユニットテストを作成することで、型定義が期待どおりに動作することを確認してください。
• コードのドキュメント化: 高度な型の目的と動作を明確に文書化し、コードの可読性を向上させましょう。
• パフォーマンスの考慮: 高度な型の過度な使用はコンパイル時間に影響を与える可能性があります。必要に応じてコードをプロファイリングし、最適化してください。